<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--左侧边栏-->
<aside th:fragment="cebian" class="bg-black dk nav-xs aside hidden-print" id="nav">
    <section class="vbox">
        <section class="w-f-md scrollable">
            <div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="10px" data-railOpacity="0.2">



                <!-- nav -->
                <nav class="nav-primary hidden-xs">
                    <ul class="nav bg clearfix">
                        <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                            Discover
                        </li>
                        <li>
                            <a href="javascript:;" onclick="ajaxRequest('/user/ajax/index')">
                                <i class="icon-disc icon text-success"></i>
                                <span class="font-bold">What's new</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" onclick="ajaxRequest('/user/ajax/genres')">
                                <i class="icon-music-tone-alt icon text-info"></i>
                                <span class="font-bold">Genres</span>
                            </a>
                        </li>

                        <li>
                            <a href="javascript:;" onclick="ajaxRequest('/user/ajax/listenAll')">
                                <i class="icon-list icon  text-info-dker"></i>
                                <span class="font-bold">Listen</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" onclick="ajaxRequest('/user/ajax/video')" data-target="#content" data-el="#bjax-el" data-replace="true">
                                <i class="icon-social-youtube icon  text-primary"></i>
                                <span class="font-bold">Video</span>
                            </a>
                        </li>
                        <li class="m-b hidden-nav-xs"></li>
                    </ul>

                </nav>
                <!-- / nav -->
            </div>
        </section>

        <footer class="footer hidden-xs no-padder text-center-nav-xs">
            <div class="bg hidden-xs ">
                <div class="dropdown dropup wrapper-sm clearfix">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      <span class="thumb-sm avatar pull-left m-l-xs">
                        <img th:src="@{${userBeanTopAndButton.image}}" class="dker" alt="...">
                        <i class="on b-black"></i>
                      </span>
                        <span class="hidden-nav-xs clear">
                        <span class="block m-l">
                          <strong class="font-bold text-lt">[[${userBeanTopAndButton.name}]]</strong>
                          <b class="caret"></b>
                        </span>
                        <span class="text-muted text-xs block m-l">Art Director</span>
                      </span>
                    </a>
                    <ul class="dropdown-menu animated fadeInRight aside text-left">
                        <li>
                            <a th:href="@{/logout}" >Logout</a>
                        </li>
                    </ul>
                </div>
            </div>
        </footer>
    </section>
</aside>

<!--顶部-->
<header th:fragment="top"  class="bg-white-only header header-md navbar navbar-fixed-top-xs">
    <div class="navbar-header aside bg-info nav-xs">
        <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open" data-target="#nav,html">
            <i class="icon-list"></i>
        </a>
        <a href="javascript:;" onclick="ajaxRequest('/user/ajax/index')" class="navbar-brand text-lt">
            <i class="icon-earphones"></i>
            <img src="images/logo.png" alt="." class="hide">
            <span class="hidden-nav-xs m-l-sm">Musik</span>
        </a>
        <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".user">
            <i class="icon-settings"></i>
        </a>
    </div>      <ul class="nav navbar-nav hidden-xs">
    <li>
        <a href="#nav,.navbar-header" data-toggle="class:nav-xs,nav-xs" class="text-muted">
            <i class="fa fa-indent text"></i>
            <i class="fa fa-dedent text-active"></i>
        </a>
    </li>
</ul>
    <form class="navbar-form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" role="search">
        <div class="form-group">
            <div class="input-group">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
            </span>
                <input type="text" class="form-control input-sm no-border rounded" placeholder="Search songs, albums...">
            </div>
        </div>
    </form>
    <div class="navbar-right ">
        <ul class="nav navbar-nav m-n hidden-xs nav-user user">

            <li class="dropdown">
                <a href="#" class="dropdown-toggle bg clear" data-toggle="dropdown">
              <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img th:src="@{${userBeanTopAndButton.image}}" alt="...">
              </span>
                    [[${userBeanTopAndButton.name}]]<b class="caret"></b>
                </a>
                <ul class="dropdown-menu animated fadeInRight">
                    <li>
                        <a th:href="@{/logout}" >Logout</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</header>


<!--底部播放-->
<footer th:fragment="bottom" class="footer bg-dark">
    <div id="jp_container_N">
        <div class="jp-type-playlist">
            <div id="jplayer_N" class="jp-jplayer hide"></div>
            <div class="jp-gui">
                <div class="jp-video-play hide">
                    <a class="jp-video-play-icon">play</a>
                </div>
                <div class="jp-interface">
                    <div class="jp-controls">
                        <div><a class="jp-previous"><i class="icon-control-rewind i-lg"></i></a></div>
                        <div>
                            <a class="jp-play"><i class="icon-control-play i-2x"></i></a>
                            <a class="jp-pause hid"><i class="icon-control-pause i-2x"></i></a>
                        </div>
                        <div><a class="jp-next"><i class="icon-control-forward i-lg"></i></a></div>
                        <div class="hide"><a class="jp-stop"><i class="fa fa-stop"></i></a></div>
                        <div><a class="" data-toggle="dropdown" data-target="#playlist"><i class="icon-list"></i></a></div>
                        <div class="jp-progress hidden-xs">
                            <div class="jp-seek-bar dk">
                                <div class="jp-play-bar bg-info">
                                </div>
                                <div class="jp-title text-lt">
                                    <ul>
                                        <li></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
                        <div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
                        <div class="hidden-xs hidden-sm">
                            <a class="jp-mute" title="mute"><i class="icon-volume-2"></i></a>
                            <a class="jp-unmute hid" title="unmute"><i class="icon-volume-off"></i></a>
                        </div>
                        <div class="hidden-xs hidden-sm jp-volume">
                            <div class="jp-volume-bar dk">
                                <div class="jp-volume-bar-value lter"></div>
                            </div>
                        </div>
                        <div>
                            <a class="jp-shuffle" title="shuffle"><i class="icon-shuffle text-muted"></i></a>
                            <a class="jp-shuffle-off hid" title="shuffle off"><i class="icon-shuffle text-lt"></i></a>
                        </div>
                        <div>
                            <a class="jp-repeat" title="repeat"><i class="icon-loop text-muted"></i></a>
                            <a class="jp-repeat-off hid" title="repeat off"><i class="icon-loop text-lt"></i></a>
                        </div>
                        <div class="hide">
                            <a class="jp-full-screen" title="full screen"><i class="fa fa-expand"></i></a>
                            <a class="jp-restore-screen" title="restore screen"><i class="fa fa-compress text-lt"></i></a>
                        </div>
                    </div>
                </div>
            </div>


            <div class="jp-playlist dropup" id="playlist">
                <ul class="dropdown-menu aside-xl dker">
                    <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                    <!--                          <li class="jp-playlist-current"><div><a href="javascript:;" class="jp-playlist-item-remove">×</a><a href="javascript:;" class="jp-playlist-item jp-playlist-current" tabindex="1">Cloudless Days <span class="jp-artist">by ADG3 Studios</span></a></div></li>-->

                </ul>
            </div>


            <div class="jp-no-solution hide">
                <span>Update Required</span>
                To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
            </div>
        </div>
    </div>
</footer>

<!--listen左侧部分-->
<section class="scrollable listenLeft" th:fragment="listenLeft">
            <div class="m-t-n-xxs item pos-rlt">
                <div class="top text-right">
                        <span class="musicbar animate bg-success bg-empty inline m-r-lg m-t" style="width:25px;height:30px">
                          <span class="bar1 a3 lter"></span>
                          <span class="bar2 a5 lt"></span>
                          <span class="bar3 a1 bg"></span>
                          <span class="bar4 a4 dk"></span>
                          <span class="bar5 a2 dker"></span>
                        </span>
                </div>
                <div class="bottom gd bg-info wrapper-lg">
                    <!--                        <span class="pull-right text-sm">101,400 <br>Followers</span>-->
                    <span class="h2 font-thin">[[${singerBean?.name}]]</span>
                </div>
                <img class="img-full" th:src="@{${singerBean?.index_img}}"  alt="...">
            </div>
            <ul class="list-group list-group-lg no-radius no-border no-bg m-t-n-xxs m-b-none auto">
                <li class="list-group-item" th:each="musicBean:${singerBean?.musicBean}">
                    <div class="pull-right m-l">
                        <!--                            下载图标-->
                        <!--                          <a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>-->
                        <!--                            原来的添加歌单图标-->
                        <!--                          <a href="#" class=""><i class="icon-plus"></i></a>-->
                        <a href="#" class="addSongSinger2" data-toggle="class">
                            <i th:class="${musicBean.userBroadcast}?'fa fa-plus-circle text-active':'fa fa-plus-circle text'" ></i>
                            <i th:class="${musicBean.userBroadcast}?'fa fa-check-circle text-info text':'fa fa-check-circle text-info text-active'" ></i>
                        </a>
                    </div>
                    <a href="#" class="m-r-sm pull-left audio">

                        <audio th:src="@{${musicBean?.music_path}}" ></audio>
                        <i class="icon-control-play text"></i>

                    </a>
                    <div class="clear text-ellipsis">
                        <span>[[${musicBean?.song_title}]]</span>
                    </div>
                </li>
            </ul>
        </section>

<!--视频评论内容-->
<section class="comment-list block fei-video" th:fragment="videoComment" >
    <article id="comment-id-1" class="comment-item" th:each="commentBean:${commentBeans}">
        <a class="pull-left thumb-sm">
            <img th:src="@{${commentBean.userBean.image}}" class="img-circle">
        </a>
        <section class="comment-body m-b">
            <header>
                <a href="#"><strong>[[${commentBean.userBean.name}]]</strong></a>
                <label class="label bg-info m-l-xs">Editor</label>
                <span class="text-muted text-xs block m-t-xs">
                            [[${commentBean.time}]]
                          </span>
            </header>
            <div class="m-t-sm">[[${commentBean.text}]]</div>
        </section>
    </article>
    <!--                    2级评论-->
    <!-- .comment-reply -->
    <!--                    <article id="comment-id-2" class="comment-item comment-reply">-->
    <!--                      <a class="pull-left thumb-sm">-->
    <!--                        <img src="images/a1.png" class="img-circle">-->
    <!--                      </a>-->
    <!--                      <section class="comment-body m-b">-->
    <!--                        <header>-->
    <!--                          <a href="#"><strong>John smith</strong></a>-->
    <!--                          <label class="label bg-dark m-l-xs">Admin</label> -->
    <!--                          <span class="text-muted text-xs block m-t-xs">-->
    <!--                            26 minutes ago-->
    <!--                          </span>-->
    <!--                        </header>-->
    <!--                        <div class="m-t-sm">Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</div>-->
    <!--                      </section>-->
    <!--                    </article>-->

</section>

<script src="/js/pjax/fei-pjax.js"></script>
</body>
</html>